<!-- 添加商品 -->
<template>
  <el-card>
    <el-descriptions title="商品信息"></el-descriptions>
    <el-form label-position="right" label-width="100px" :model="formLabelAlign" style="max-width: 800px">
      <el-form-item label="商品分类">
        <el-select v-model="formLabelAlign.classifyId" class="m-2" placeholder="Select" size="large">
          <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="formLabelAlign.goodsTitle" />
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="formLabelAlign.sellingPrice" />
      </el-form-item>
      <el-form-item label="成本价">
        <el-input v-model="formLabelAlign.costPrice" />
      </el-form-item>
      <el-form-item label="回收价">
        <el-input v-model="formLabelAlign.recoveryPrice" />
      </el-form-item>
      <el-form-item label="商品主图">
        <el-upload v-model:file-list="formLabelAlign.titleImage" action="" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="masterUpload">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="无背景">
        <el-upload v-model:file-list="formLabelAlign.titleImageTransparent" action="" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="backgroundUpload">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload v-model:file-list="formLabelAlign.mainImages" action="" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="分享标题">
        <el-input v-model="formLabelAlign.shareTitle" />
      </el-form-item>
      <el-form-item label="分享图片">
        <el-upload v-model:file-list="formLabelAlign.shareImage" action="" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="shareUpload">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="发售时间">
        <el-date-picker v-model="formLabelAlign.presellTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
          placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="商品详情">
        <div style="border: 1px solid #ccc">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
          <Editor style="height: 500px; overflow-y: hidden;" v-model="formLabelAlign.content"
            :defaultConfig="editorConfig" @onCreated="handleCreated" />
        </div>
      </el-form-item>
      <el-form-item label="商品归属">
        <el-radio-group v-model="formLabelAlign.belongFlag" class="ml-4">
          <el-radio :label="1" size="large">商城商品</el-radio>
          <el-radio :label="2" size="large">盲盒/爆团奖品 </el-radio>
          <el-radio :label="3" size="large">全部</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否展示">
        <el-radio-group v-model="formLabelAlign.isShow" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品虚拟销量">
        <el-input v-model="formLabelAlign.virtualSales" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="formLabelAlign.sort" />
      </el-form-item>
      <span class="dialog-footer">
        <el-button @click="goback">返回</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </span>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, defineComponent, shallowRef, onBeforeUnmount } from 'vue'
import { GetClassifyListListApi, AddGoodsListListApi } from '@/api/GoodsList'
import { uploadImageFn, validateFn } from '@/utils'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'


defineComponent({
  components: {
    Editor,
    Toolbar
  }
})
const router = useRouter()

//富文本-----------start
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {}
const editor = editorRef.value
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const editorConfig = {
  MENU_CONF: {}
}
editorConfig.MENU_CONF['uploadImage'] = {
  async customUpload(file, insertFn) {
    let url = await uploadImageFn(file)
    insertFn(url)
  }
}
//富文本------------end

const formLabelAlign = ref({
  classifyId: null,
  goodsTitle: null,
  sellingPrice: null,
  costPrice: null,
  recoveryPrice: null,
  titleImage: [],
  titleImageTransparent: [],
  shareImage: [],
  mainImages: [],
  shareTitle: '',
  presellTime: null,
  content: '',
  belongFlag: 3,
  isShow: 1,
  virtualSales: null,
  sort: null
})

const positionType = ref([])
//商品分类列表查询(下拉框)
async function GetClassifyListList() {
  const res = await GetClassifyListListApi()
  res.data.forEach(item => {
    positionType.value.push({
      value: item.classifyId,
      label: item.classifyName
    })
  })
}
GetClassifyListList()

//商品图片上传图片
async function beforeAvatarUpload(file) {
  const res = await uploadImageFn(file)
  formLabelAlign.value.mainImages.push({
    url: res
  })
}

//商品主图
async function masterUpload(file) {
  const res = await uploadImageFn(file)
  formLabelAlign.value.titleImage.push({
    url: res
  })
}

//无背景
async function backgroundUpload(file) {
  const res = await uploadImageFn(file)
  formLabelAlign.value.titleImageTransparent.push({
    url: res
  })
}

//分享图片
async function shareUpload(file) {
  const res = await uploadImageFn(file)
  formLabelAlign.value.shareImage.push({
    url: res
  })
}

//添加商品
async function add() {
  const imglist = []
  // formLabelAlign.value.titleImage = formLabelAlign.value.titleImage[0].url
  // formLabelAlign.value.titleImageTransparent = formLabelAlign.value.titleImageTransparent[0].url
  // formLabelAlign.value.shareImage = formLabelAlign.value.shareImage[0].url
  formLabelAlign.value.mainImages.forEach(item => {
    imglist.push(item.url)
  })
  console.log(imglist);
  console.log(formLabelAlign.value);
  await AddGoodsListListApi({
    ...formLabelAlign.value,
    mainImages: imglist,
    titleImage: formLabelAlign.value.titleImage[0].url,
    titleImageTransparent: formLabelAlign.value.titleImageTransparent[0].url,
    shareImage: formLabelAlign.value.shareImage[0].url,
  })
  ElMessage({
    message: '添加成功',
    type: 'success',
  })
  goback()
}

//返回
function goback() {
  router.back()
}
</script>

<style lang="scss" scoped></style>